<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script src="${pageContext.request.contextPath}/static/editjs/ckeditor/ckeditor.js"></script>
<link href="${pageContext.request.contextPath}/static/style/diary.css" rel="stylesheet">

<style>
	.data_list{
		margin-left:150px;
	}
	.form{
		text-align: center;
	}
</style>

<script type="text/javascript">
	function checkForm(){
		
		var title=document.getElementById("title").value;
		if(title==null||title==""){
			document.getElementById("error").innerHTML="标题不能为空！";
			return false;
		}
		
		var content=CKEDITOR.instances.content.getData();
		if(content==null||content==""){
			document.getElementById("error").innerHTML="内容不能为空！";
			return false;
		}
		
		var diaryTypeId=document.getElementById("diaryTypeId").value;
		if(diaryTypeId==null||diaryTypeId==""){
			document.getElementById("error").innerHTML="请选择日志类别！";
			return false;
		}
		
		return true;
	}
	
	// 重置数据
	function resetValue(){
		$("#title").val("");
		$("#content").val("");
		$("#diaryTypeId").combobox("setValue","");
		UE.getEditor('content').setContent("");
		}
</script>
<div class="data_list">
		<div class="data_list_title">
				<c:choose>
					<c:when test="${diary.diaryId!=null }">
				<img src="${pageContext.request.contextPath}/static/img/diary_type_edit_icon.png"/>
				修改日记</div>
				</c:when>
			<c:otherwise>
				<img src="${pageContext.request.contextPath}/static/img/diary_add_icon.png"/>
				写日记</div>
			</c:otherwise>
		</c:choose>
		<form class="form" action="${pageContext.request.contextPath}/background/save" method="post" onsubmit="return checkForm()">
			<div>
				<div class="diary_title"><input type="text" id="title"  name="title" value="${diary.title }" class="input-xlarge"  style="margin-top:5px;height:30px;"  placeholder="日志标题..."/></div>
				<div>
					<!-- <script id="ckeditor" type="text/plain" style="width:100%;height:500px;"></script> -->
					<textarea class="ckeditor" id="content" name="content" >${diary.content }</textarea>
				</div>
				<div class="diary_type">
					<select class="easyui-combobox" style="width: 154px" id="diaryTypeId" name="diaryType.diaryTypeId" editable="false" panelHeight="auto" >
							<option value="">请选择博客类别...</option>	
					    <c:forEach var="diaryType" items="${diaryTypeCountList }">
					    	<option value="${diaryType.diaryTypeId }" ${diaryType.diaryTypeId==diary.typeId?'selected':''} >${diaryType.typeName }</option>
					    </c:forEach> 	
					    
                	</select>
				</div>
				<div>
					<%-- <input type="hidden" id="diaryId" name="diaryId" value="${diary.diaryId }"/>  --%>
					<input type="submit" class="btn btn-primary" value="保存"/>
					<button class="btn btn-primary" type="button" onclick="javascript:resetValue()">重置</button>
					<button class="btn btn-primary" type="button" onclick="javascript:history.back()">返回</button> 
				</div>
				<div> <font id="error" color="red">${error }</font> </div>
			</div>
		</form>
		
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('content');


</script>
</div>